<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DeepSeek AI聊天 - 浙江传媒学院实验五</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 页面头部 -->
    <header class="header">
        <div class="header-content">
            <h1>🤖 DeepSeek AI聊天助手</h1>
            <div class="project-info">
                <span class="university">浙江传媒学院</span>
                <span class="separator">|</span>
                <span class="course">仓颉编程语言实验五</span>
                <span class="separator">|</span>
                <span class="student">俞哲</span>
                <span class="separator">|</span>
                <span class="teacher">指导老师：栗青生</span>
            </div>
        </div>
        <div class="connection-status" id="connectionStatus">
            <span class="status-indicator" id="statusIndicator">🔴</span>
            <span class="status-text" id="statusText">连接中...</span>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-container">
        <!-- 聊天区域 -->
        <div class="chat-container">
            <div class="chat-header">
                <h2>💬 与AI助手对话</h2>
                <div class="chat-info">
                    <span>基于DeepSeek API的智能对话系统</span>
                </div>
            </div>

            <!-- 消息显示区域 -->
            <div class="messages-container" id="messagesContainer">
                <div class="message-item ai-message">
                    <div class="message-avatar">🤖</div>
                    <div class="message-content">
                        <div class="message-text">正在连接AI服务...</div>
                        <div class="message-time">系统消息</div>
                    </div>
                </div>
            </div>

            <!-- 输入区域 -->
            <div class="input-container">
                <div class="input-wrapper">
                    <textarea
                        id="messageInput"
                        placeholder="请输入您的问题...（按Ctrl+Enter发送）"
                        maxlength="2000"
                        rows="1"
                    ></textarea>
                    <button id="sendButton" class="send-button" disabled>
                        <span class="button-text">发送</span>
                        <span class="button-icon">📤</span>
                    </button>
                </div>
                <div class="input-footer">
                    <span class="char-count">0/2000</span>
                    <span class="input-hint">AI可以帮助您学习仓颉语言、网络编程等技术知识</span>
                </div>
            </div>
        </div>

        <!-- 侧边栏信息 -->
        <div class="sidebar">
            <div class="info-card">
                <h3>🎯 实验目标</h3>
                <ul>
                    <li>掌握WebSocket实时通信</li>
                    <li>集成DeepSeek AI API</li>
                    <li>实现前后端分离架构</li>
                    <li>学习异步编程模式</li>
                </ul>
            </div>

            <div class="info-card">
                <h3>🔧 技术栈</h3>
                <ul>
                    <li><strong>后端:</strong> Node.js + Express</li>
                    <li><strong>前端:</strong> HTML5 + CSS3 + JS</li>
                    <li><strong>通信:</strong> WebSocket</li>
                    <li><strong>AI:</strong> DeepSeek API</li>
                </ul>
            </div>

            <div class="info-card">
                <h3>💡 使用提示</h3>
                <ul>
                    <li>询问仓颉语言语法</li>
                    <li>学习TCP/Socket编程</li>
                    <li>了解网络协议原理</li>
                    <li>获取编程学习建议</li>
                </ul>
            </div>

            <div class="info-card">
                <h3>📊 连接信息</h3>
                <div class="connection-info">
                    <div class="info-item">
                        <span class="info-label">状态:</span>
                        <span class="info-value" id="sidebarStatus">连接中</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">消息数:</span>
                        <span class="info-value" id="messageCount">0</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">响应时间:</span>
                        <span class="info-value" id="responseTime">-</span>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页面底部 -->
    <footer class="footer">
        <div class="footer-content">
            <p>&copy; 2024 浙江传媒学院 - 仓颉编程语言实验项目</p>
            <p>DeepSeek AI集成演示 | 网络编程与AI技术综合实践</p>
        </div>
    </footer>

    <!-- 加载遮罩 -->
    <div class="loading-overlay" id="loadingOverlay">
        <div class="loading-content">
            <div class="loading-spinner"></div>
            <div class="loading-text">AI正在思考中...</div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="script.js"></script>
</body>
</html>